<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo2</title>
    <script src="../js/frame/flexible_css.debug.js"></script>
    <script src="../js/frame/flexible.debug.js"></script>
    <script src="../js/frame/jquery-1.11.3.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flowTree{
            width: 80%;
            height: 30px;
            background: gray;
            margin: 0 auto;
            font-size: 12px;
        }
        [data-dpr='1'] .flowTree{
            font-size: 12px;
        }
        [data-dpr='2'] .flowTree{
            font-size: 24px;
        }
        [data-dpr='3'] .flowTree{
            font-size: 36px;
        }
        .flowTree li{
            list-style: none;
        }
        .flowTree .liClass{
            width: 100%;
            background: #d3d3d3;
            text-align: center;
            line-height: 40px;
            vertical-align: middle;
            color: darkslateblue;
            /*height: 40px;*/
            list-style: none;
            margin-bottom: 2px;
            cursor: pointer;
        }
        [data-dpr='1'] .liClass{
            line-height: 40px;
        }
        [data-dpr='2'] .liClass{
            line-height: 80px;
        }
        [data-dpr='3'] .liClass{
            line-height: 120px;
        }
        .hideTreeCont{
            width: 100%;
            height: 200px;
            border: 1px solid red;
        }
    </style>
    <script>
        $(function(){
            $('.flowTree .liClass').on('click',function(){
//                $('.flowTree').find('.hideTreeCont').hide();
                if($(this).next('.hideTreeCont').css('display') == 'none'){
                    $(this).next('.hideTreeCont').show();
                    $(this).parent('li').siblings('li').find('.hideTreeCont').hide();
                }else{
                    $(this).next('.hideTreeCont').hide();
                }
            });
        });
    </script>
</head>
<body>
<div class="flowTree">
    <ul>
        <li>
            <p class="liClass">说明1</p>
            <div class="hideTreeCont" style="display: none;">你好说明1</div>
        </li>
        <li>
            <p class="liClass">说明2</p>
            <div class="hideTreeCont" style="display: none;">你好说明2</div>
        </li>
        <li>
            <p class="liClass">说明3</p>
            <div class="hideTreeCont" style="display: none;">你好说明3</div>
        </li>
    </ul>
</div>
</body>
</html>